<template lang="html">
    <div class="box">
          <!-- <div class="header">
                <el-tabs v-model="activeName" @tab-click="switchTabBar()">
                  <el-tab-pane label="供应商(OBD)" name="1"></el-tab-pane>
                  <el-tab-pane label="运营商" name="2"></el-tab-pane>
                  <el-tab-pane label="维修厂" name="3"></el-tab-pane>
                  <el-tab-pane label="汇总" name="4"></el-tab-pane>
                </el-tabs>
          </div> -->

          <div class="body">
                <div class="table_box" v-show="activeName==1">
                    <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
                        <el-input placeholder="输入供应商名称" v-model="keyword" style="width: 420px;">
                          <el-button slot="append" style="width: 120px;" @click="switchTab()">搜索</el-button>
                        </el-input>
                        <el-form-item label="时间段" style="margin-bottom: 0;width: 520px;">
                          <el-date-picker v-model="intervalTime" type="daterange" align="right" unlink-panels range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"
                            value-format="yyyy-MM-dd HH:mm:ss" >
                          </el-date-picker>
                        </el-form-item>
                    </el-form>

                    <el-table :data="tableData.list" style="width: 100%">
                        <el-table-column prop="sm_name" align="center" label="供应商名称" >
                              <!-- <template lang="html" slot-scope="scope">
                                  <el-popover trigger="hover" placement="top">
                                      <p>姓名: {{ scope.row.sm_name }}</p>
                                      <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.sm_name }}</el-tag>
                                      </div>
                                  </el-popover>
                              </template> -->
                        </el-table-column>
                        <el-table-column  prop="phone"  align="center" label="联系方式" ></el-table-column>
                        <el-table-column  prop="city"  align="center" label="地区" ></el-table-column>
                        <el-table-column  prop="money"  align="center" label="押金金额" ></el-table-column>
                        <el-table-column  prop="voucher"  align="center" label="押金凭证" >
                            <template slot-scope="scope">
  <img :src="scope.row.voucher"
       class="preview-img"
       :preview="scope.row.voucher"
       alt="">
</template>
                        </el-table-column>
                        <el-table-column  prop="create_time"  align="center" label="上传时间" ></el-table-column>
                    </el-table>
                </div>
                <div class="table_box" v-show="activeName==2">
                    <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
                        <el-input placeholder="输入运营商名称" v-model="keyword" style="width: 420px;">
                          <el-button slot="append" style="width: 120px;" @click="switchTab()">搜索</el-button>
                        </el-input>
                        <el-form-item label="时间段" style="margin-bottom: 0;width: 520px;">
                          <el-date-picker v-model="intervalTime" type="daterange" align="right" unlink-panels range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"
                            value-format="yyyy-MM-dd HH:mm:ss" >
                          </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <el-table :data="tableData.list" style="width: 100%">
                        <el-table-column  prop="company"  align="center" label="运营商名称" >
                            <!-- <template lang="html" slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <p>姓名: {{ scope.row.share_name }}</p>
                                    <div slot="reference" class="name-wrapper">
                                      <el-tag size="medium">{{ scope.row.share_name }}</el-tag>
                                    </div>
                                </el-popover>
                            </template> -->
                        </el-table-column>
                        <el-table-column  prop="phone"  align="center" label="联系方式" ></el-table-column>
                        <el-table-column  align="center" label="地区" >
                            <template slot-scope="scope">
                                <el-popover placement="top-start" trigger="hover" >
                                    <p v-for="(item,index) in scope.row.area_name" :key="index" v-if="item">{{item.city}}-{{item.county}}</p>
                                    <el-button type="primary" size="mini" slot="reference" plain>查看地区</el-button>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column  prop="money"  align="center" label="押金金额" ></el-table-column>
                        <el-table-column  prop="reg_name"  align="center" label="押金凭证" >
                              <template slot-scope="scope">
  <img :src="scope.row.voucher"
       class="preview-img"
       :preview="scope.row.voucher"
       alt="">
</template>
                        </el-table-column>
                        <el-table-column  prop="create_time"  align="center" label="时间" ></el-table-column>
                    </el-table>
                </div>
                <div class="table_box" v-show="activeName==3">
                    <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
                        <el-input placeholder="输入维修厂名称" v-model="keyword" style="width: 420px;">
                          <el-button slot="append" style="width: 120px;" @click="switchTab()">搜索</el-button>
                        </el-input>
                        <el-form-item label="时间段" style="margin-bottom: 0;width: 520px;">
                          <el-date-picker v-model="intervalTime" type="daterange" align="right" unlink-panels range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;"
                            value-format="yyyy-MM-dd HH:mm:ss" >
                          </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <el-table :data="tableData.list" style="width: 100%">
                        <el-table-column  prop="company"  align="center" label="维修厂名称" >
                          <!-- <template lang="html" slot-scope="scope">
                                  <el-popover trigger="hover" placement="top">
                                      <p>姓名: {{ scope.row.share_name }}</p>
                                      <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.share_name }}</el-tag>
                                      </div>
                                  </el-popover>
                              </template> -->
                        </el-table-column>
                        <el-table-column  prop="phone"  align="center" label="联系方式" ></el-table-column>
                        <el-table-column  prop="car_brand"  align="center" label="地区" >
                            <template slot-scope="scope">
  <p>{{scope.row.province}}-{{scope.row.city}}-{{scope.row.county}}</p>
</template>
                        </el-table-column>
                        <el-table-column  prop="money"  align="center" label="金额" ></el-table-column>
                        <el-table-column  prop="create_time"  align="center" label="支付时间" ></el-table-column>
                    </el-table>
                </div>
                <div class="table_box" v-show="activeName==4">
                    <div v-loading="loading">
                        <div class="summary_left">
                            <el-form class="filterCondition demo-form-inline" ref="form"  :inline="true" label-width="80px">
                                <el-form-item label="时间段" style="margin-bottom: 0;width: 520px;">
                                  <el-date-picker v-model="intervalTime" type="daterange" align="right" unlink-panels range-separator="-"
                                    start-placeholder="开始日期" end-placeholder="结束日期" @change="onchange" style="width: 100%;"
                                    value-format="yyyy-MM-dd HH:mm:ss" >
                                  </el-date-picker>
                                </el-form-item>
                            </el-form>
                        </div>

                        <div id="echart_canvas" style="width: 100%;height:600px;margin:0 auto"></div>
                    </div>

                </div>

                <p  class="summary">{{tableData.total}}</p>
                <!--  -->
                <div class="page_box" v-show="activeName!=4">
                    <el-pagination class="page" layout="prev, pager, next"
                      :current-page="currentPage"
                      @current-change="switchPage" :page-count='tableData.rows' >
                    </el-pagination>
                </div>
          </div>

    </div>
</template>

<script>
export default {
  data() {
      return {
        token: this.$store.state.user.token3,
        activeName: '1',
        currentActive:'1',
        loading:false,
        keyword: '',
        tableData: [],
        intervalTime: [],
        currentPage:1
      }
  },
  created () {
    this.activeName = this.ifTitleActive(this.$route.meta.title)
    this.switchTabBar()
  },
  watch: {
    $route () {
      this.activeName = this.ifTitleActive(this.$route.meta.title);
      this.switchTabBar()
    }
  },
  methods: {
    initSetData () {
      this.keyword = ''
      this.tableData = []
      this.intervalTime = []
    },
    ifTitleActive (t) {
      switch (t) {
        case '供应商(OBD)':
          return '1';
        case '运营商':
          return '2';
        case '维修厂':
          return '3';
        case '汇总':
          return '4';
        }
      },
      switchTabBar(){
          // if(this.activeName == this.currentActive){
          //   return false;
          // }else{
             this.initSetData()
             this.switchTab()
             this.currentActive = this.activeName
          // }
      },
      switchTab(n=this.activeName,p=1){
        var jsonData = {
          token: this.token,
          key: this.keyword,
          start_time: (this.intervalTime && this.intervalTime[0]) || '',
          end_time: (this.intervalTime && this.intervalTime[1]) || '',
          page: p
        }
        this.currentPage = p;
        switch (n) {
          case '1':   //供应商（OBD）
            this.$http3.smObdPledgeList(jsonData)
            .then(this.resultFn())
          break;
        case '2':    //运营商
          this.$http3.agentPledgeList(jsonData)
            .then(this.resultFn())
          break;
        case '3':   //维修厂
          this.$http3.shopPledgeList(jsonData)
            .then(this.resultFn())
          break;
        case '4':   //汇总
          this.$http3.gatherPledge(jsonData)
            .then(this.resultFn())
          break;
      }

    },
    resultFn () {
      return function (res) {
        this.loading = false
        if (res) {
          this.tableData =
            res.data.code === 1 ?
              res.data.data : [];
        }
        if (this.activeName == 4) {
          this.renderEcharts(this.tableData);
        }
        this.$previewRefresh();
        this.$forceUpdate()
      }.bind(this)
    },
    onchange () {
      this.switchTab()
    },
    switchPage (e) {
      this.switchTab(this.activeName, e)
    },

    renderEcharts (data) {

      var option2 = {
        title: {
          text: '数据统计',
          x: 'center'
        },
        tooltip: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          data: [{ name: data.pledge.smObdPledge + '供应商（OBD）押金' }, { name: data.pledge.agentPledge + '运营商押金' }, { name: data.pledge.shopPledge + '维修厂押金' }]
        },
        series: [
          {
            name: '总收入',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            data: [
              { value: data.pledge.smObdPledge, name: data.pledge.smObdPledge + '供应商（OBD）押金' },
              { value: data.pledge.agentPledge, name: data.pledge.agentPledge + '运营商押金' },
              { value: data.pledge.shopPledge, name: data.pledge.shopPledge + '维修厂押金' }
            ]
          }
        ]

      }
      var myChart = this.$echarts.init(document.getElementById('echart_canvas'));
      myChart.setOption(option2);


    },

  }
}
</script>

<style lang="css" scoped>
@import "../../../my-style/app.css";
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #3498e9;
  border: none;
  color: white;
}
/deep/ .table_box .preview-img {
  display: block;
  width: 100%;
  height: 30px;
}
.page_box {
  text-align: center;
}
</style>
